<template>
  <view class="opinion-reaction-root">
    <!-- <view class="search">
        <uni-icons class="search-icon" type="search" />
        <input class="inputInnner" placeholder="搜索专业领域关键字" />
        <view class="verifbtn flexcent">
            搜索
        </view>
    </view> -->
    <!-- 内容 begin -->
    <view class="content-item-1" v-show="tabList != null && tabList.length > 0">
      <view class="tabbar">
        <view class="item" v-for="(item, index) in tabList" :key="index" :class="{ active: tabIndex === index }"
              @tap="getLiaisonStation(item,index)">
          {{ item.departNameAbbr }}
          <view class="underline" :class="{ active: tabIndex === index }"
                :style="{ border: tabIndex === index ? '2px solid #ad2325' : '0' }">
          </view>
        </view>
      </view>
      <swiper style="height: calc(100% - 100rpx);" :current="0" :duration="300" :show-scrollbar="false">
        <swiper-item>
          <view class="list" v-show="groupTabList != null && groupTabList.length > 0">
            <view class="contact-station-list row">
              <view v-for="(item, index) in groupTabList" :key="index" class="grid"
                    :class="{ active: groupTabIndex === index }" @tap="getMembers(item,index)">
                <view class="selected"></view>
                <view class="item">
                  {{ item.departName }}
                </view>
              </view>
            </view>

            <view class="cadre-list row" v-show="cadreList != null && cadreList.length > 0">
              <view v-for="(item, index) in cadreList" :key="index"
                    class="grid1">
                <view class="item">
                  <image :src="item.representativePic" class="avatar"></image>
                  <view class="info">
                    <view class="name">{{ item.representativeName }}</view>
                    <view class="speciality">

                      <view :key="roleIndex" v-for="(roleItem,roleIndex) in item.roles"
                            class="name-tag tag-item empty">
                        {{ roleItem }}
                      </view>
                    </view>

<!--                    <view class="post" v-if="showRepresentativeMajors">{{ item.representativeDuty }}-->
                    <view class="post" v-if="true">{{ item.representativeDuty }}
                    </view>
                    <view v-if="showInfo" class="post" @click="phone(item.representativePhone)"
                          style="background-color: red;color: #fff;padding: 4 8rpx;border-radius: 16rpx;text-align: center;">
                      <uni-icons type="phone-filled" color="#fff" size="24rpx"></uni-icons>
                      拨打电话
                    </view>
                    <view class="speciality"
                          v-if="showRepresentativeMajors && Array.isArray(item.representativeMajors) && item.representativeMajors.length > 0">
                      <view
                          v-for="(representativeMajorItem,representativeMajorIndex) in item.representativeMajors"
                          :key="representativeMajorItem.id" class="tag-item">
                         {{ representativeMajorItem.majorName }}
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <view class="cadre-list row" v-show="cadreList == null || cadreList.length <= 0">
              <empty style="width: 100%;height: 100%"></empty>
            </view>
          </view>
          <view class="list" v-show="groupTabList == null || groupTabList.length <= 0">
            <empty style="width: 100%"></empty>
          </view>
        </swiper-item>
      </swiper>
    </view>
    <view class="content-item-1" v-show="tabList == null || tabList.length <= 0">
      <empty></empty>
    </view>
  </view>
</template>

<script>
import {
  GET_LIAISON_STATION,
  GET_MEMBER_LIST,
  GET_OFFICE,
} from "@/api/representative";
import {
  baseRequestGet
} from "@/util/means/request";
import {
  getFileAccessHttpUrl
} from "@/util/fileUtil";

import empty from "@/components/empty/index.vue";
import {
  defaultAvatar
} from "@/util/publicConfig";
import {baseMixins} from "@/util/baseMixins";

export default {
  mixins: [baseMixins],
  name: 'personnel',
  components: {
    empty
  },
  props: {
    isPetition: {
      type: String
    },
    noClick: {
      type: Boolean,
      default: false
    },
    showInfo: {
      type: Boolean,
      default: false
    },
    showRepresentativeMajors: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      swiperHeight: 0,
      tabIndex: 0,
      tabList: [],
      groupTabIndex: 0,
      groupTabList: [],
      cadreList: [],
    }
  },
  methods: {
    phone(representativePhone) {
      uni.makePhoneCall({
        phoneNumber: representativePhone
      });
    },

    getOffice() {
      baseRequestGet({
        url: GET_OFFICE
      }).then(res => {
        let firstOffice = res?.length > 0 ? res[0] : {};
        this.tabList = res
        this.getLiaisonStation(firstOffice, 0, true)
      }).catch(() => {

      })
    },
    getLiaisonStation(officeItem, index, reloadFlag = false) {
      if (this.tabIndex === index && !reloadFlag) return;
      this.tabIndex = index;
      baseRequestGet({
        url: GET_LIAISON_STATION,
        data: {
          departId: officeItem?.id
        }
      }).then(res => {
        let firstLiaisonStation = res?.length > 0 ? res[0] : {};
        this.groupTabList = res
        this.getMembers(firstLiaisonStation, 0, true)
      }).catch(() => {

      })
    },
    getMembers(liaisonStationItem, index, reloadFlag = false) {

      if (this.groupTabIndex === index && !reloadFlag) return;
      this.groupTabIndex = index;
      baseRequestGet({
        url: GET_MEMBER_LIST,
        data: {
          departId: liaisonStationItem?.id,
          isPetition: this.isPetition
        }
      }).then(res => {
        this.cadreList = res.map(item => {
          item.representativePic = item.representativePic && item.representativePic !==
          '' ? getFileAccessHttpUrl(item.representativePic) : defaultAvatar
          return item;
        })
      }).catch(() => {

      })
    }
  }
}
</script>

<style lang='scss' scoped>
.tag-root {
  display: flex;
  flex-direction: row;
  width: 100%;
  flex-wrap: wrap;
}

.opinion-reaction-root {
  width: 750rpx;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
  padding: 20rpx;
  display: flex;
  flex-direction: column;

  // 封装的input输入框
  .search {
    display: flex;
    align-items: center;
    // width: 100%;
    // padding: 0 30rpx;
    margin: 30rpx;
    background-color: $bg-color-white;
    border-radius: 30rpx;

    // 输入框前边的图标
    .search-icon {
      opacity: 0.8;
      margin: 0 20rpx;
      font-size: 36rpx !important;
      color: #ababab !important;
    }

    // 输入框
    .inputInnner {
      flex: 1;
      height: 100%;
      font-size: 28rpx;
    }

    // 验证码按钮
    .verifbtn {
      height: 30rpx;
      background: #ad2325;
      font-size: 28rpx;
      color: #FFF;
      padding: 30rpx;
      border-radius: 30rpx;
      margin-left: 30rpx;

      view {
        width: 140rpx;
        text-align-last: justify;
      }
    }
  }

  .content-item-1 {
    width: 100%;
    //height: calc(100% - 120rpx);
    height: 100%;
    // padding: 30rpx 0;
    font-size: 30rpx;

    .tabbar {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      overflow-x: auto;
      white-space: nowrap;
      -webkit-overflow-scrolling: touch;
      padding: 20rpx 20rpx;
      box-sizing: border-box;

      .item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: $font-size-lg;
        padding: 0 10rpx;
      }

      .underline {
        width: 40%;
        height: 3rpx;
        margin-top: 10rpx;
        border-radius: 15px;

        &.active {
          background: #ad2325;
        }
      }

      .active {
        color: #ad2325;
      }
    }

    .list {
      height: 100%;
      overflow: hidden;
      display: flex;
      justify-content: space-between;
      padding: 20rpx 0;
      width: 100%;

      .row {
        display: flex;
        flex-direction: column;

        .active {
          background: #FFF;

          .selected {
            width: 6rpx;
            height: 100%;
            background: #B90303;
            margin-left:3rpx;
          }
        }

        .grid {
          display: flex;
          flex-direction: row;
          min-height: 150rpx;
          height: max-content;

          .item {
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding:10rpx;
          }
        }
      }


      .contact-station-list,
      .cadre-list {
        height: 100%;
        overflow: auto;
        box-sizing: border-box;

        .grid {
          padding: 6rpx 6rpx 6rpx 0;
          //margin: 10rpx 0;
        }
      }

      // 联络站列表
      .contact-station-list {
        width: 30%;
      }

      // 干部列表
      .cadre-list {
        width: 70%;
        background: #FFF;

        .grid1 {
          margin-right: 30rpx;
          border-bottom: 2rpx solid #E1E1E1;
          margin-left: 30rpx;

          .item {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: flex-start;
            text-align: center;
            margin: 20rpx 0rpx 20rpx 0;

            .avatar {
              width: 160rpx;
              height: 176rpx;
              border-radius: 20rpx;
            }

            .info {
              width: calc(100% - 160rpx);
              padding: 0 10rpx 0 20rpx;
              box-sizing: border-box;
              text-align: justify;
              display: flex;
              flex-direction: column;

              view {
                padding: 10rpx 0;
              }

              .name {
                padding-top: 0;
                font-weight: 500;
                font-size: 32rpx;
                color: #222222;
                line-height: 35rpx;
                font-style: normal;
                text-transform: none;
                margin-right: 10rpx;
              }

              .post {
                color: #707070;
                font-size: 26rpx;
                width: 100%;
                overflow-wrap: break-word;
                word-break: break-all;
                white-space: pre-wrap;
              }

              .speciality {
                width: fit-content;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                margin-bottom: 10rpx;

                .tag-item {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  background: #FEDADA;
                  color: #BD0E0E;
                  border-radius: $border-radius-lg;
                  font-size: 22rpx;
                  padding: 10rpx 12rpx;
                  margin-right: 10rpx;
                  margin-bottom:4rpx;
                }

                & .empty {
                  background: transparent;
                  color: #ABABAB;
                  border: 1rpx solid #ABABAB;
                }
              }

            }
          }
        }

      }
    }
  }
}
</style>
